<template>
	<view class="regist-view">
		<view class="regist-left">
			<text v-for="(item, index) in popular"  :key="index" :class="addColor == index ? 'addcolor' : ''"
				@click="changeList(index, item._id)">
				{{item.dep_ment}}
			</text>
		</view>
		<view class="regist-right">
			<block v-for="(item, index) in reglist" :key="index">
				<view v-for="(item_a, index_a) in item.dep_ment_list" :key="index_a" @click="jumpRoute(item_a.dep_id)">
					{{item_a.dep_name}}
				</view>
			</block>
		</view>
	</view>
	<!-- 骨架屏 -->
	<!-- <skIndex v-if="skeLeton"></skIndex> -->
</template>

<script>
	import {
		getdep,
		getreg
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				popular: [],
				addColor:0,
				reglist: [],
				id:''
			};
		},
		methods: {
			changeList(index, id) {	
				this.addColor=index
				this.id=id
				console.log(id);
				getreg({
					id: this.id
				}).then(res => {
					this.reglist = res.data.data

				})
			},
			jumpRoute() {

			}
		},
		onLoad() {
			this.changeList()
			 getdep().then(res => {
				console.log(res, 23);
				this.popular=res.data.data
				
			})

		}

	}
</script>

<style lang="scss">
	.regist-view {
		display: flex;
		justify-content: space-between;
	}

	.regist-left {
		background-color: #f5f5f5;
		width: 200rpx;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		overflow: auto;
	}

	.regist-left text {
		display: block;
		padding: 25rpx;
	}

	.addcolor {
		background-color: #ffffff;
		color: #2c76ef;
	}

	.regist-right {
		padding-left: 200rpx;
		flex: 1;
	}

	.regist-right view {
		padding: 25rpx;
	}
</style>
